<script setup>
import {ref} from 'vue'
import ButtonX from '@/components/button-x/index.vue'
import {navigateTo} from '@/utils/uni-api-wrap/route'

const props = defineProps({
  title: String,
  context: String,
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确认'
  }
})

const emit = defineEmits(['close', 'confirm', 'contentClick'])

const popup = ref(null)
const outsideParams = ref({})

const close = () => {
  emit('close', outsideParams.value)
  outsideParams.value = {}
  popup.value.close()
}

const open = (params = {}) => {
  outsideParams.value = params
  popup.value.open()
}

const confirm = () => {
  emit('confirm', outsideParams.value)
  close()
}

defineExpose({
  close,
  open
})

</script>

<template>
  <uni-popup ref="popup" type="center" :safe-area="false">
    <view class="dialog-x-container">
      <text class="dialog-x-title" v-if="props.title">{{ props.title }}</text>
      <text class="dialog-x-context" @click="($event) => emit('contentClick', $event)">{{ props.context }}</text>
      <view class="dialog-x-button-container">
        <button-x size="small" @click="close">{{ props.cancelText }}</button-x>
        <button-x size="small" type="primary" @click="confirm">{{ props.confirmText }}</button-x>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.dialog-x-container {
  display: inline-flex;
  margin-bottom: 32rpx;
  padding: 48rpx 32rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32rpx;
  border-radius: 32rpx;
  background: $kaoyan-color-14;
  .dialog-x-title {
    font-size: 40rpx;
    color: $kaoyan-color-9;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: 56rpx;
  }
  .dialog-x-context {
    width: 636rpx;
    color: $kaoyan-color-9;
    text-align: center;
    font-size: 40rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.436rpx;
  }
  .dialog-x-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    button-x {
      flex: 1;
      &:first-child {
        margin-right: 10rpx;
      }
      &:last-child {
        margin-right: 10rpx;
      }
    }
  }
}
</style>
